// data-set 可以按需引入，除此之外不要引入别的包
import React from 'react';
import { Chart, Axis, Tooltip, Geom, Legend, View } from 'bizcharts';
import DataSet from '@antv/data-set';
import PoliceStaticList from './PoliceStaticList';



// 下面的代码会被作为 cdn script 注入 注释勿删
// CDN START
// const data = [
//   { label: '总警监', 申报: 50, 审核: 40, 审批: 30},
//   { label: '副总警监', 申报: 60, 审核: 50, 审批: 40},
//   { label: '一级警监', 申报: 80, 审核: 70, 审批: 60},
//   { label: '二级警监', 申报: 100, 审核: 80, 审批: 60},
//   { label: '三级警监', 申报: 120, 审核: 100, 审批: 90},
//   { label: '一级警督', 申报: 150, 审核: 130, 审批: 110},
//   { label: '二级警督', 申报: 170, 审核: 150, 审批: 130},
//   { label: '三级警督', 申报: 180, 审核: 160, 审批: 150},
//   { label: '一级警司', 申报: 200, 审核: 190, 审批: 180},
//   { label: '二级警司', 申报: 220, 审核: 200, 审批: 180},
//   { label: '三级警司', 申报: 230, 审核: 210, 审批: 200},
//   { label: '一级警员', 申报: 260, 审核: 240, 审批: 230},
//   { label: '二级警员', 申报: 300, 审核: 290, 审批: 280},
// ];
const ds = new DataSet();
ds.setState('type', '');
// const dv = ds.createView().source(data);

// dv.transform({
//   type: 'fold',
//   fields: ['申报', '审核', '审批'], // 展开字段集
//   key: 'type', // key字段
//   value: 'value', // value字段
// })
// .transform({
//   type: 'filter',
//   callback: (d) => {
//     console.log(ds.state.type);
//     return d.type !== ds.state.type;
//   }
// });


let chartIns = null;

const getG2Instance = (chart) => {
  chartIns = chart;
};

const legendItems = [
 	{ value: '申报', marker: { symbol: 'square', fill: '#3182bd', radius: 5 } },
  { value: '审核', marker: { symbol: 'square', fill: '#41a2fc', radius: 5 } },
  { value: '审批', marker: { symbol: 'square', fill: '#54ca76', radius: 5 } },
];

class PoliceStaticBar extends React.Component {

  constructor(props) {
      super(props);
      this.state = {
          modalStaffVisible: false,
          values: null
      }
  }
  //人员统计表显示
  handleStaffModalVisible = (flag,values) => {
  	this.setState({
  		modalStaffVisible: !!flag,
      values
  	});
  };

  render() {
    const {
      title,
      data
    } = this.props;
    const dv = ds.createView().source(data);

    dv.transform({
      type: 'fold',
      fields: ['申报', '审核', '审批'], // 展开字段集
      key: 'type', // key字段
      value: 'value', // value字段
    })
    .transform({
      type: 'filter',
      callback: (d) => {
        return d.type !== ds.state.type;
      }
    });

    const { modalStaffVisible,values } = this.state;
    return (
    <div>
        <Chart height={400} width={500} forceFit data={dv} padding="auto"
                  onGetG2Instance={(c) => {
                    this.chart = c;
                  }}
                  onPlotClick={ev => {
                    if(!ev.data) return;
                    this.handleStaffModalVisible(true,ev.data._origin.label);
                  }}
              >
          {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
          <Legend
            custom
            allowAllCanceled
            items={legendItems}
            onClick={(ev) => {
                setTimeout(() => {
                    const checked = ev.checked;
                    const value = ev.item.value;
                    const newLegend = legendItems.map((d) => {
                        if (d.value === value) {
                            d.checked = checked
                        }
                        return d;
                      })
                      this.chart.filter('type', (t) => {
                         const legendCfg = newLegend.find(i => i.value == t);
                         return legendCfg && legendCfg.checked;
                      });

                    this.chart.legend({
                      items: newLegend
                    })
                    this.chart.repaint();
                  },0)
            }}
          />
          <Axis name="label" />

          <Tooltip />
          <Geom
            type="interval"
            position="label*value"
            color={['type', (value) => {
              if (value === '申报') {
                return '#2b6cbb';
              }
              if (value === '审核') {
                return '#41a2fc';
              }
              if (value === '审批') {
                return '#54ca76';
              }
            }]}
            adjust={[{
              type: 'dodge',
              marginRatio: 1 / 32,
            }]}
          />
        </Chart>
        <PoliceStaticList
          modalStaffVisible={modalStaffVisible}
          values={values}
          handleStaffModalVisible={this.handleStaffModalVisible}
        />
    </div>

    );
  }
}

export default PoliceStaticBar
